<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 100px;
            text-align: center;
        }

        button {
            width: 157.5px;
            margin-top: 5px;
        }

        input {
            border: none;
        }

        div,p {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="divTable" class="active">
        <table border="1">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <!-- 
        <tr>
            <td>Jack</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>18</td>
            <td>男</td>
        </tr> 
    -->
            </tbody>
        </table>
    </div>

    <p id="pJson">JSON数据</p>

    <!-- edit=编辑 -->
    <button id="btnEdit">编辑/保存</button>

    <!-- format=格式 -->
    <button id="btnFormat">JSON/表格</button>

    <script>
        // 在页面上根据数据，动态创建表格
        // 提示：动态地拼接一个html字符串 然后box.innerHTML = htmlStr
        // - 创建一个表格，展示上面数组中的信息
        // - 点击编辑/保存 表格实现可编辑 编辑后点击保存 再次不可编辑
        // - 点击切换显示方式 在JSON和表格间来回切换

        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            },
            {
                name: 'Rose',
                age: 20,
                gender: '女'
            },
            {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ]

        /* 显示表格数据 */

        /* 预备拼接多个tr字符串 */
        var trs = ""

        /* 遍历数组 为每个对象生成一个tr字符串 */
        arr.forEach(
            function (obj,index) {
                // 每有一个对象 就造一个表格行
                // 将姓名 年龄 性别 分别放在不同的td下
                // 数据将来可以编辑 因此将数据展示在input中 默认不可编辑
                trs += `
                <tr>
                    <td>
                        <input value=${obj.name} disabled />
                    </td>
                    <td>
                        <input value=${obj.age} disabled />
                    </td>
                    <td>
                        <input value=${obj.gender} disabled />
                    </td>
                </tr>
                `
            }
        )

        // 给tbody直接设置拼接好的若干个tr作为innerHTML=表格已成
        document.querySelector("tbody").innerHTML += trs

        /* 找出所有的input框（后面需要批量禁用/启用） */
        var ips = document.querySelectorAll("input")

        /* 点击编辑/保存按钮 */
        document.querySelector("#btnEdit").onclick = function (e) {
            // 切换所有input框的禁用/启用状态
            ips.forEach(
                function (ip) {
                    // ip.disabled ? ip.removeAttribute("disabled") : ip.setAttribute("disabled", true)
                    ip.toggleAttribute("disabled")
                }
            )

            // 需要时保存一下数据
            // 如果input变灰了 说明该保存数据了
            if (ips[0].disabled) {
                arr = [
                    {
                        name: ips[0].value,
                        age: ips[1].value * 1,
                        gender: ips[2].value
                    },
                    {
                        name: ips[3].value,
                        age: ips[4].value * 1,
                        gender: ips[5].value
                    },
                    {
                        name: ips[6].value,
                        age: ips[7].value * 1,
                        gender: ips[8].value
                    }
                ]
            
                // 同时改变一下JSON数据
                pJson.innerText = JSON.stringify(arr)
            }
        }

        /* 切换表格和JSON的显隐  */
        document.querySelector("#btnFormat").onclick = function (e) {
            /* 有active则拿掉 无active样式则加上 */
            divTable.classList.toggle("active")
            pJson.classList.toggle("active")
        }
    </script>
</body>

</html>